<script lang="ts">
import Vue from 'vue'
import NavBar from "@/components/nav-bar/nav-bar.vue";
import Popup from "@/components/popup/popup.vue";
import {Machine, Stores} from "@/types/agent/stores";
import {unbindMachine} from "@/services/Agents/machine";
import tips from "@/utils/tips";
import ConfirmPopup from "@/components/confirmPopup/confirmPopup.vue";

export default Vue.extend({
  name: "Machines",
  components: {ConfirmPopup, Popup, NavBar},
  data() {
    return {
      store: {} as Stores,
      machines: [] as Machine[],
      selectedMachineIndex: 0,
      machineRemoveShow: false
    }
  },
  computed: {
    lang() {
      return this.$t('agentPages.storeMachines')
    },
  },
  onLoad(query?: AnyObject) {
    this.store = JSON.parse(decodeURIComponent(query.store))
    this.machines = this.store.machines
  },
  methods: {
    onMachine(index: number) {
      console.log("index -==--", index)
      this.selectedMachineIndex = index
      this.machineRemoveShow = true
    },
    async machineRemoveConfirm() {
      const {id} = this.store
      const {id: machineId} = this.machines[this.selectedMachineIndex]
      const bindMachineRes = await unbindMachine(id, machineId)
      const {msg} = bindMachineRes
      console.log('bindMachineRes', bindMachineRes)
      uni.navigateBack({delta: 2})
      this.machineRemoveShow = false
      tips.toast(msg)
    },
  }
})
</script>

<template>
  <view>
    <nav-bar :page-title="lang.pageName"/>
    <view :class="['padding-30', locale]">
      <view class="flex-between">
        <view/>
        <navigator
            :url="`/pages/Agent/Store/MachineBind?store=${encodeURIComponent(JSON.stringify(store))}`"
            class="add-device radio-40 padding-14-20" hover-class="hover">
          <view class="flex-center gap-20">
            <u-icon name="plus-circle" size="24" color="#fff"/>
            <view>{{ lang.addDevice }}</view>
          </view>
        </navigator>
      </view>

      <view v-for="(item, index) in machines" :key="index" class="card column gap-8 text-28 padding-20 radio-10"
            @click="onMachine(index)">
        <!-- 头部照片和名称-->
        <view class="flex-center gap-20">
          <image class="icon-90" src="/static/agent/device.png" mode="aspectFit"/>
          <view class="column gap-8">
            <view>{{ item.name || lang.deviceName }}</view>
            <view>
              <view>{{ item.device_id }}</view>
            </view>
          </view>
        </view>
      </view>

      <view v-if="machines.length <= 0" class="center" style="height: 60vh;">
        <u-empty
            mode="data"
            :width="240"
            :hidden="240"
            :textSize="22"
            :text="lang.emptyDevice"
            icon="http://cdn.uviewui.com/uview/empty/data.png"
        />
      </view>
    </view>

    <confirm-popup :title="lang.unbindDevice['title']" :show="machineRemoveShow" @onConfirm="machineRemoveConfirm"
                   @update:show="machineRemoveShow=false">
      <view class="center text-32">{{ lang.unbindDevice['content'] }}</view>
    </confirm-popup>
  </view>
</template>

<style scoped lang="scss">
.add-device {
  display: inline-block;
  background-color: $uni-color-primary;
  color: white;
}
</style>